﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Find Service</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    <style>
        html, body, #map-canvas
        {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    @RenderBody()
    <div id="map-canvas"></div>
    <div id="tools" style="position: absolute; top: 0; z-index: 1">
        @using (Html.BeginForm())
        {
            <select name="category">
                <option value="">Select a service to filter</option>
                <option value="1">Bat dong san</option>
                <option value="2">Nha cho thue</option>
                <option value="3">Phong cho thue</option>
            </select>
            <input type="hidden" name="coordinates" />
            <button type="button" id="btnSearch">Search</button>
        }
    </div>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing"></script>
    @Scripts.Render("~/bundles/jquery")
    <script>
        var map;
        var mylat = 10.841293399447757;
        var mylng = 106.65387868881226;
        var coordinates = [];
        var polygon;
        var routePath;
        var searchComplete = false;
        var markers = [];

        function initialize() {
            var mapOptions = {
                zoom: 15,
                center: new google.maps.LatLng(mylat, mylng),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            google.maps.event.addDomListener(map, 'click', function (e) {
                if (searchComplete) {
                    coordinates = [];
                    clearAll();
                    searchComplete = false;
                }
                coordinates.push(e.latLng);
                drawCoordinates();
            });
        }

        function drawCoordinates() {
            clearAll();
            if (coordinates.length > 2) {
                polygon = new google.maps.Polygon({
                    paths: coordinates,
                    strokeColor: "#FF0000",
                    strokeOpacity: 1,
                    strokeWeight: 1,
                    fillColor: '#00FF00',
                    fillOpacity: 0.5
                });
                polygon.setMap(map);
            }

            routePath = new google.maps.Polyline({
                path: coordinates,
                strokeColor: '#ff0000',
                strokeOpacity: 1.0,
                strokeWeight: 1,
                geodesic: true,
                editable: true
            });
            routePath.setMap(map);
        }

        function clearAll() {
            if (routePath) {
                routePath.setMap(null);
            }
            if (polygon) {
                polygon.setMap(null);
            }
            if (markers.length > 0) {
                for (var i = 0; i < markers.length; i++) {
                    markers[i].setMap(null);
                }
                markers = [];
            }
        }

        google.maps.event.addDomListener(window, 'load', initialize);

        $(document).ready(function () {
            $('#tools').css('right', $(window).width() / 2 + 'px');
            $('#btnSearch').click(function (e) {
                if (coordinates.length > 2) {
                    var data = [];
                    for (var i = 0; i < coordinates.length; i++) {
                        data.push({ lat: coordinates[i].lat(), lng: coordinates[i].lng() });
                    }
                    $('[name="coordinates"]').val(window.JSON.stringify(data));
                    var form = $(this).parents('form');
                    $.ajax({
                        url: form.attr('action'),
                        data: form.serialize(),
                        datatype: 'json',
                        type: 'POST',
                        success: function (result) {
                            drawCoordinates();
                            if (result) {
                                var location, marker;
                                for (var i = 0; i < result.length; i++) {
                                    location = new google.maps.LatLng(result[i].lat, result[i].lng);
                                    marker = new google.maps.Marker({
                                        position: location,
                                        title: 'result'
                                    });
                                    marker.setMap(map);
                                    markers.push(marker);
                                }
                            }
                            else {
                                alert('No result');
                            }
                        },
                        complete: function () {
                            $("[name='category'] > option:first-child").attr("selected", true);
                            $('[name="coordinates"]', form).val('');
                            searchComplete = true;
                        }
                    });
                }
            });
        });
    </script>
</body>
</html>
